<template>
  <div class="audio">
    <audio ref="abc" :src="audioinit.url" autoplay></audio>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import bus from '@/bus.js'
export default {
  name: 'audioplay',
  computed: {
    ...mapState({
      audioinit: 'audioinit'
    })
  },
  methods: {
    addEveA () {
      const that = this
      this.$refs.abc.addEventListener('canplay', function () {
        console.log(this.duration)
        that.$store.commit('sendDt', this.duration)
      })
      this.$refs.abc.addEventListener('timeupdate', function () {
        that.$store.commit('sendCurT', this.currentTime)
      })
      this.$refs.abc.addEventListener('ended', () => {
        console.log('歌曲播放完毕')
        bus.$emit('end')
      })
    }
  },
  mounted () {
    bus.$on('pause', (p) => {
      if (p) {
        this.$refs.abc.play()
      } else {
        this.$refs.abc.pause()
      }
    })
    this.addEveA()
  }
}
</script>
<style lang="stylus" scoped>
audio
  visibility hidden
  height 0
</style>
